import React from 'react';
import { Button } from 'antd';

import styles from './styles.module.less';

const ColCard = () => {

  const listData = [
    {
      name: 'Head of Network',
      describe: 'Architecting and delivering exceptional network experiences'
    },
    {
      name: 'IT System Manager',
      describe: 'Ensuring smooth IT operations through expert system management'
    },
    {
      name: 'Tier 2, NOC Engineer (Jakarta Only)',
      describe: '24/7 resolution & support to keep critical systems up and running'
    },
    {
      name: 'NOC Technical Support Engineer',
      describe: 'Provide first level response to customer and follow escalation procedure when needed',
    },
    {
      name: 'Field Service Engineer (Johor)',
      describe: 'Perform as Senior Technical Engineer on overall Data Center',
    },
  ]

  return (
    <div className={styles.col_card}>
      {
        listData.map((item, index) => (
          <div className={styles.card} key={index}>
            <div className={styles.name} title={item.name}>
              {item.name}
            </div>
            <div className={styles.desc} title={item.describe}>
              {item.describe}
            </div>
            <div className={styles.apply}>
              <Button type='primary'>Apply</Button>
            </div>
          </div>
        ))
      }
      {
        [...Array(3)].map((_, index) => (
          <i key={index} />
        ))
      }
    </div>
  )
};

export default ColCard;